<template>
  <div>
    <div class="resume-container" ref="resumeContainer">
      <!-- 1. 电话和邮箱部分 -->
      <div class="section-1">
        <el-row :gutter="20">
          <el-col :span="12">
            <i class="el-icon-phone-outline"></i>
            &nbsp;
            <i>电话:</i>
            {{ resumeData.phonenumber }}
          </el-col>
          <el-col :span="12">
            <i class="el-icon-message"></i>
            &nbsp;
            <i>邮箱:</i>
            {{ resumeData.email }}
          </el-col>
        </el-row>
      </div>
      <!-- 2. 图片、姓名、性别、个人能力部分 -->
      <div class="section-2">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-image
              :src="require('@/assets/images/avatar/' + resumeData.picture)"
              fit="cover"
              style="width: 100%; height: 150px"
            ></el-image>
          </el-col>
          <el-col :span="16">
            <el-row :gutter="10">
              <el-col :span="24">
                <span style="font-size: 28px">姓名:{{ resumeData.name }}</span>
              </el-col>
              <el-col :span="24">
                <i>性别:</i>
                {{ resumeData.gender }}
              </el-col>
              <el-col :span="24">
                <i>年龄:</i>
                {{ resumeData.age }}
              </el-col>
              <el-col :span="24">
                <i>求职意向:</i>
                {{ resumeData.intention }}
              </el-col>
              <el-col :span="24">
                <!-- <i>个人能力:</i> -->
                <div class="abilities">
                  <li
                    v-for="(ability, index) in resumeData.abilities"
                    :key="index"
                  >
                    <span
                      style="font-family: 'Courier New', Courier, monospace"
                      >{{ ability }}</span
                    >
                  </li>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!-- 3. 教育背景部分 -->
      <div class="section-3">
        <el-collapse accordion>
          <el-item>
            <span style="font-size: larger">教育背景:</span>
            <el-row :gutter="10">
              <el-col :span="24">
                <span style="font-family: 'Courier New', Courier, monospace">{{
                  resumeData.background
                }}</span>
              </el-col>
            </el-row>
          </el-item>
        </el-collapse>
      </div>
      <!-- 4. 工作经历部分 -->
      <div class="section-4">
        <el-item>
          <span style="font-size: larger">工作经历:</span>
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="abilities">
                <li
                  v-for="(experience, index) in resumeData.experience"
                  :key="index"
                >
                  <span
                    style="font-family: 'Courier New', Courier, monospace"
                    >{{ experience }}</span
                  >
                </li>
              </div>
            </el-col>
          </el-row>
        </el-item>
      </div>
    </div>
    <div class="pdf-button">
      <el-button type="primary" @click="generatePdf">生成PDF</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import html2pdf from "html2pdf.js";
export default {
  data() {
    return {
      resumeData: {},
    };
  },
  mounted() {
    const id = this.$route.query.id;
    axios.get(`http://localhost:8080/resume/${id}`).then((response) => {
      this.resumeData = response.data.data;
      if (typeof this.resumeData.abilities === "string") {
        this.resumeData.abilities = this.resumeData.abilities.split("\n");
      }
      if (typeof this.resumeData.experience === "string") {
        this.resumeData.experience = this.resumeData.experience.split("\n");
      }
    });
  },
  methods: {
    generatePdf() {
    console.log("已执行generatePdf");

    const element = this.$refs.resumeContainer;
    const options = {
    margin: 0, // 边距
    filename: 'resume.pdf',
    image: { type: 'jpeg', quality: 0.98 }, // 图片质量
    html2canvas: { scale: 2 }, // 提高清晰度
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }, // 设置为横向 A4
  };
    html2pdf()
      .set(options)
      .from(element)

      .save()
      .toPdf()
      .get('pdf') // 获取PDF对象
      .then(pdf => {
          // 生成Blob对象
          return pdf.output('blob');
      })
      .then(pdfBlob => {
          console.log("PDF生成成功，准备上传");

          // 创建FormData
          const formData = new FormData();
          formData.append('file', pdfBlob, 'resume.pdf');

          // 发送POST请求
          const id = this.$route.query.id;
          axios.post('http://localhost:8080/resume/pdf', formData, {
            params: {
              id: id
            }
          })
            .then(response => {
              console.log('PDF上传成功', response);
            })
            .catch(error => {
              console.error('PDF上传失败', error);
            });
      })
      .catch((error) => {
        console.error('PDF生成失败:', error);
      });
}
  },
};
</script>

<style scoped>
.resume-container {
  width: 40%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-1 {
  background-color: #f0f0f0;
  padding: 10px;
  width: 100%;
}
.section-2 {
  padding: 10px;
  width: 100%;
}
.section-3 {
  background-color: #e0e0e0;
  padding: 10px;
  width: 100%;
}
.section-4 {
  background-color: #d0d0d0;
  padding: 10px;
  width: 100%;
}
.section-5 {
  background-color: #c0c0c0;
  padding: 10px;
  width: 100%;
}

.abilities {
  white-space: pre-line;
}
.abilities div {
  position: relative;
}
.abilities div::before {
  content: "\2022 ";
  position: absolute;
  left: -10px;
}
.pdf-button {
    text-align: center;
    margin-top: 50px;
}

</style>
